<template>
  <div class="home">
    <div class="headers">
      <Header></Header>
      <ly-tabs v-model="value" activeColor="#b0352f" @change="changTab">
        <ly-tab-item
          v-for="(item, index) in ly_tab"
          :key="index"
          :name="item.value"
          :title="item.label"
        />
      </ly-tabs>
    </div>

    <section ref="wrapper">
      <div>
        <div v-for="(item, index) in newData" :key="index">
          <Swiper
            v-if="item.type == 'swiperList'"
            :swiperList="item.data"
          ></Swiper>
          <Icons v-if="item.type == 'iconsList'" :iconsList="item.data"></Icons>

          <Recommend
            v-if="item.type == 'recommendList'"
            :recommendList="item.data"
          ></Recommend>
          <Like v-if="item.type == 'likeList'" :likeList="item.data"></Like>
          <AD v-if="item.type == 'adList'" :adList="item.data"></AD>
          <!-- <AD v-if="true" ></AD> -->
        </div>
      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/components/home/Header.vue";
import Swiper from "@/components/home/Swiper.vue";
import Icons from "@/components/home/Icons.vue";
import Recommend from "@/components/home/Recommend.vue";
import Like from "@/components/home/Like.vue";
import AD from "@/components/home/AD.vue";
import Tabbar from "@/components/common/Tabbar.vue";
//引入插件
import BetterScroll from "better-scroll";

//引入封装的依赖
import http from "@/common/api/request.js";

export default {
  name: "Home",
  data() {
    return {
      value: "0",
      ly_tab: [
        { value: "0" },
        { value: "1" },
        { value: "2" },
        { value: "3" },
        { value: "4" },
        { value: "5" },
        { value: "6" },
        { value: "7" },
        { value: "8" },
        { value: "9" },
      ],
      newData: [],
    };
  },
  components: {
    Tabbar,
    Header,
    Swiper,
    Icons,
    Recommend,
    Like,
    AD,
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let res = await http.$axios({
        url: "/api/index_list/0/data/1",
      });
      this.ly_tab = Object.freeze(res.topBar);
      this.newData = Object.freeze(res.data);

      //保证DOM渲染完毕后在执行
      this.$nextTick(() => {
        this.initBs();
      });
    },

    //滚动
    initBs() {
      let wrapper = this.$refs.wrapper;
      new BetterScroll(wrapper, {
        click: true,
        movale: true,
        zoom: true,
        observeDOM: true, //解决刷新后依然有滚动效果
      });
    },

    //
    async addData(index) {
      let res = await http.$axios({
        url: "/api/index_list/" + index + "/data/1",
      });
      // console.log(res);
      // console.log(res[0].data);
      if (res.constructor != Array) {
        this.newData = res.data;
      } else {
        this.newData = res;
      }

      //保证DOM渲染完毕后在执行
      this.$nextTick(() => {
        this.initBs();
      });
    },

    //ly-tab事件头部导航滚动事件
    changTab(index) {
      //更具参数请求后台数据据
      this.addData(index);
    },
  },
  mounted() {},
  watch: {},
};
</script>
<style scoped lang="less">
.home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f5f5f5;

  .headers {
    width: 100%;
    // height: 1.7rem;

    // .headers-main {
    //   width: 100%;
    //   position: fixed;
    //   top: 0;
    //   left: 0;
    // }

    // /deep/ .ly-tabbar {
    //      border-bottom: none;
    //    }

    //   /deep/ .ly-tabs__tab-list {
    //  // margin-bottom: 0;
    //  border-bottom: none;
    //   }
  }
  section {
    // border: 5px solid green;
    // margin-top: 0.8rem;
    flex: 1;
    overflow: hidden;
  }
}
</style>
